//out: ../css/
@import './base.less';

@vw:3.75vw;

header {
    width: 100%;
    height: (50/@vw);
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 (15/@vw);
    background-color: #fff;
    box-shadow: 0px 4vw 3.6vw -5.067vw rgba(211, 220, 236, 0.77);
    // border-bottom: (6/@vw) solid ;
    // border-image: linear-gradient(to right, #fff 0%, #f9fafb 100%) ;
    // border-image: linear-gradient(to right, #fff, #f9fafb) 1;
    .collect{
        display: block;
        width: (235/@vw);
        height: (50/@vw);
        img{
            width: 100%;
            height: 100%;
        }
    }
    .download{
        width: (80/@vw);
        height: (30/@vw);
        background-color: #fff00f;
        line-height:  (30/@vw);
        border-radius: (15/@vw);
        text-align: center;
        font-size: (14/@vw);
    }
}
.search{
    // margin-top: (50/@vw);
    margin: (60/@vw) auto 0;
    width: (343/@vw);
    height: (32/@vw);
    line-height: (32/@vw);
    text-align: center;
    background-color: #f2f4f5;
    border-radius: (20/@vw);
    color: #a1a4b3;
    font-size: (14/@vw);

    .icon-sousuo{
        margin-right: (5/@vw);
        font-size: (16/@vw);
    }
}
.wrap{
    display: flex;
    margin: (10/@vw) auto;
    width: (342/@vw);
    height: (132/@vw);
    border-radius: (10/@vw);
    overflow: hidden;
    position: relative;
    img{
        width: (342/@vw);
        height: (132/@vw);
    }
    .wrap-three{
        position: absolute;
        left: 50vw;
        bottom: (10/@vw);
        transform: translate(-70%,0);
        width: (100/@vw);
        height:(20/@vw);
        background-color: pink;
    }
}
footer{
    width: (319/@vw);
    height: (45/@vw);
    position: fixed;
    left: 0;
    bottom: (40/@vw);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 (9/@vw) 0 (18/@vw);
    margin: 0 (27/@vw);
    background-color: #fff;
    font-weight: 700;
    border-radius: (25/@vw);
    font-size: (14/@vw);

    img{
        width: (37/@vw);
        height:(37/@vw);
    }
    p{
        margin: 0 (30/@vw) 0 (5/@vw);
    }
    .icon-right{
        width: (27/@vw);
        height:(27/@vw);
        line-height:(27/@vw);
        background-color: #f7f7f7;
        text-align: center;
        border-radius: (15/@vw);
        font-size: (14/@vw);

    }
}
.title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 (16/@vw);
    margin: (13/@vw) 0;
    h3{
        font-size: 5.3vw;
    }
    a{
        font-size: 3.2vw;
        color: #a2a3b3;
        display: flex;
        align-items: center;
    }
}
.rankcontent{
    margin: (15/@vw) (16/@vw);
    background-color: #fff;
    display: flex;
    border-radius: (10/@vw);
    img{
        width: (105/@vw);
        height:(105/@vw);
        border-radius: (10/@vw);
    }
    ul{
        width: (200/@vw);
        height: (105/@vw);
        padding: (13.5/@vw) 0;
        color: #a1a4b3;
        font-size: 2.9vw;
        margin-left: (21/@vw);
        li{
            margin-bottom: 2w;
            line-height: 4.5vw;
        }
    }
    .song-title{
        font-size: 3.7vw;
        color: #333;
        font-weight: 500;
        margin-bottom: 1.6vw;
        display: flex;
        align-items: center;
        .icon-right{
            font-size: 4.5vw;
        }
    }
}
.recommend{
    align-items: center;
    padding: 0 (16/@vw);
    height: (346/@vw);
    ul{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        li{
            width: (105/@vw);
            height: (155/@vw);
            margin-bottom: (18/@vw);
            .top{
                position: relative;
                .pic{
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    background-color: rgba(0, 0, 0, 0.3);
                    border-radius: 0 4.267vw 0 4.267vw;
                    color: #fff;
                    // padding-left: 1.6vw; 
                    // padding-right: 3.467vw;
                    padding:0.7vw 3vw;
                    font-size: 3vw;
                    .icon-play{
                    font-size: 3vw;
                    margin-right:1.3vw;
                    }
                }
                img{
                    width: (105/@vw);
                    height: (105/@vw);
                    border-radius: (20/@vw);
                }
            }
            p{
                margin-top: (10/@vw);
                font-size: 3.7vw;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2; 
                overflow: hidden;
                text-overflow: ellipsis;
            }
        }
    }
}
.bottom-footer{
    margin-top: (40/@vw);
    margin-bottom: (100/@vw);
}